<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .active {
        background: red;
        color: gold;
      }
      .text-danger {
        width: 100px;
        height: 45px;
        border-radius: 10px;
        background: lightcoral;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- <h1 id="title" @click="handleToggleClass" class="myclass" :class="{active: isActive, 'text-danger': hasError}">
        {{title}}
      </h1> -->
      <!-- <h1 id="title" @click="handleToggleClass" class="myclass" :class="classObject">{{title}}</h1> -->
      <!-- <h1 id="title" @click="handleToggleClass" class="myclass" :class="[activeClass, errorClass]">{{title}}</h1> -->
      <h1 id="title" :style="{  'font-size': font + 'px', color: 'red'}" @click="handleToggleClass">{{title}}</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>
      /*
       class:
       1. 对象语法（以对象的形式去绑定class类）

       对象语法 { a: true, b: false }
       借助计算属性：classObject() {
            return {
              active: this.isActive,
              'text-danger': this.hasError,
            }
          },

       2. 数组语法（以数组的形式去绑定class类）

       style:
      */

      // vue2 构造函数 数据驱动dom
      const vm = new Vue({
        el: '#app',
        // data写成函数形式，可以防止变量污染
        data() {
          return {
            font: 20,
            title: '标题',
            count: 0,
            list: [],
            isActive: true,
            hasError: true,
            activeClass: 'active',
            errorClass: 'text-danger',
          }
        },
        // 计算属性，可以防止一些计算逻辑，具有缓存的功能，可以优化项目性能，也是放置函数的，这个函数往往是用来处理数据的
        computed: {
          classObject() {
            return {
              active: this.isActive,
              'text-danger': this.hasError,
            }
          },
        },
        created() {
          console.log(this.classObject, 'classObject--------------')
        },
        methods: {
          handleToggleClass() {
            this.isActive = !this.isActive
          },
          getData() {
            createData().then((res) => {
              console.log(res, 'res')
              this.list = res.data
            })
          },
        },
      })

      // 模拟一个异步接口
      function createData() {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve({
              code: 0,
              msg: 'success',
              data: ['正在上映', '即将上映'],
            })
          }, 1000)
        })
      }
    </script>
  </body>
</html>
